iT邦幫忙

2021 iThome 鐵人賽

DAY 11
2
Modern Web

Canvas 小錦囊系列 第 11

Day 11 - 用 canvas 復刻 小畫家 多邊形

  • 分享至 

  • xImage
  •  

方法一

此多邊形方法雖然不是小畫家的畫法,但一樣可以達成多邊形的做法,如下:

  /**
   * 滑鼠點下畫布
   */
  const handleMouseDown = (event: any) => {
  ...
    switch (tool) {
      case "polygon":
        pointsArray = [...pointsArray, point];
        drawPolygon({ ctx });
        break;
    }
  };
  /** 繪製多邊形 */
const drawPolygon = ({ ctx }: { ctx: CanvasRenderingContext2D }) => {
    clearCanvas();
    ctx.beginPath();
    ctx.moveTo(pointsArray[0].x, pointsArray[0].y);
    for (let index = 1; index < pointsArray.length; index++) {
      ctx.lineTo(pointsArray[index].x, pointsArray[index].y);
    }
    ctx.closePath();
    ctx.stroke();
};


上一篇
Day 10 - 用 canvas 復刻 小畫家 放大鏡
下一篇
Day 12 - 用 canvas 復刻 小畫家 文字填寫
系列文
Canvas 小錦囊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言